<!DOCTYPE html>
<html>

<head>
    <title>程序员划水摸鱼音乐聊天室</title>
    <meta name="referrer" content="never">
    <meta charset="UTF-8">
    <meta content='程序员划水,聊天室,音乐聊天室,一起听歌,程序员,划水摸鱼,佛系聊天,交友水群,,斗图,表情包' name='Keywords'>
    <meta content='BBBUG.COM，一个程序员的佛系划水音乐聊天室，超多程序员都在这里一起听歌、划水聊天、技术分享、表情包斗图、讨论产品设计，各种小哥哥小姐姐们在这里等你哟。欢迎你的加入！'
        name='Description'>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <link rel="stylesheet" href="static/css/element.css">
    <link rel="stylesheet" href="static/css/chat.css?version=<?php echo time();?>">
    <meta name="baidu-site-verification" content="iv2Dh5WaXx" />
    <style>
        .searchSongBox {
            display: fixed !important;
            left: 20px !important;
            bottom: 120px !important;
        }

        .searchSongBox .loading {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .searchSongBox .list {
            position: relative;
            width: 400px;
            min-height: 100px;
            display: inline-block;
        }

        .searchSongBox a {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .searchSongBox thead {
            display: none;
        }

        .searchSongBox tr {
            cursor: pointer;
        }

        .pickedSongBox {
            display: fixed !important;
            right: 0px !important;
            bottom: 140px !important;
        }

        .pickedSongBox .loading {
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
        }

        .pickedSongBox .list {
            position: relative;
            width: 400px;
            min-height: 100px;
            max-height: 250px;
            overflow: auto;
            overflow-x: hidden;
            display: inline-block;
        }

        .pickedSongBox a {
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .pickedSongBox thead {
            display: none;
        }

        .pickedSongBox tr {
            cursor: pointer;
        }

        .pickSong {
            text-align: center;
            margin-bottom: 10px;
        }

        .pickSong span {
            background-color: #eeeeee;
            color: #409EFF;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding: 5px 15px;
            font-size: 12px;
        }


        .nextSong {
            text-align: center;
            margin-bottom: 10px;
        }

        .nextSong span {
            background-color: #eeeeee;
            color: orangered;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding: 5px 15px;
            font-size: 12px;
        }

        .gift {
            text-align: center;
            margin-bottom: 10px;
        }

        .gift span {
            background-color: lightsalmon;
            color: white;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding: 5px 15px;
            font-size: 12px;
        }

        .pushSong {
            text-align: center;
            margin-bottom: 10px;
        }

        .pushSong span {
            background-color: #eeeeee;
            color: orangered;
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            border-radius: 5px;
            padding: 5px 15px;
            font-size: 12px;
        }

        .musicBox {
            position: fixed;
            right: 5px;
            bottom: 110px;
            background-attachment: fixed;
            z-index: 10;
        }

        .musicBox span {
            font-size: 12px;
        }

        .giftBox {
            position: fixed;
            right: 5px;
            bottom: 140px;
            width: 300px;
            background-attachment: fixed;
            z-index: 10;
        }

        .giftBox img {
            font-size: 12px;
            margin: 5px;
            width: 40px;
            height: 40px;
            cursor: pointer;
        }

        .lrc {
            position: fixed;
            left: 10px;
            bottom: 10px;
            font-size: 12px;
            color: #999;
            vertical-align: middle;
        }

        .love {
            -webkit-animation: rotate 5s linear infinite;
            -moz-animation: rotate 5s linear infinite;
            -o-animation: rotate 5s linear infinite;
            animation: rotate 5s linear infinite;
        }

        .musicHead {
            width: 16px;
            height: 16px;
            border-radius: 100%;
            vertical-align: middle;
            margin-right: 5px;
        }

        .logo {
            position: absolute;
            left: 20px;
            top: 10px;
        }

        .logo .title {
            font-size: 20px;
            color: orangered;
        }

        .giftTips {
            font-size: 12px;
            color: #999;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="main">
            <div class="chat" id="chatRecord" @scroll="scrollEvent($event)" @click="closeAllBox">
                <div v-for="(item,index) in messageList">
                    <div v-if="item.type=='img'">
                        <div :class="getChatClassByUser(item.user.user_id)">
                            <el-dropdown trigger="click" @command="handleChatCommand">
                                <img :class="nowMusicObject.user.user_id == item.user.user_id?'love head':'head'"
                                    :src="replaceHttp2Https(item.user.user_head)" width="40px" height="40px" />
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'atUserBefore')">@一下Ta
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'showProfileBefore')">查看资料
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'showHomePageBefore')">进入主页
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'showBigImageBefore')">查看大图
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'getBackMessage')"
                                        v-if="item.user.user_id == userInfo.user_id ">撤回消息
                                    </el-dropdown-item>
                                    <el-dropdown-item divided v-if="isMaster"
                                        :command="beforeHandleChatCommand(item,'removeBlackListBefore')">允许发言
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="isMaster"
                                        :command="beforeHandleChatCommand(item,'addBlackListBefore')">禁止发言
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="isMaster && item.user.user_id != userInfo.user_id"
                                        :command="beforeHandleChatCommand(item,'getBackMessage')">撤回消息
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <div class="detail">
                                <a class="title" href="javascript:;">
                                    {{item.user.user_name}}
                                    <el-tag size="small" type="info" class="from">{{getPlatName(item.user.user_plat)}}
                                    </el-tag>
                                    <el-tag size="small" type="warning" class="from" v-if="item.admin==true">管理员
                                    </el-tag>
                                </a>
                                <div class="img">
                                    <img :src="getImageUrl(item.msg)" @click="showBigImage(getImageUrl(item.resource))"
                                        onerror="this.src='static/images/404.jpg'" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div v-if="item.type=='text'">
                        <div :class="getChatClassByUser(item.user.user_id)">
                            <el-dropdown trigger="click" @command="handleChatCommand">
                                <img :class="nowMusicObject.user.user_id == item.user.user_id?'love head':'head'"
                                    :src="replaceHttp2Https(item.user.user_head)" width="40px" height="40px" />
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'atUserBefore')">@一下Ta
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'showProfileBefore')">查看资料
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'showHomePageBefore')">进入主页
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'showBigImageBefore')">查看大图
                                    </el-dropdown-item>
                                    <el-dropdown-item :command="beforeHandleChatCommand(item,'getBackMessage')"
                                        v-if="item.user.user_id == userInfo.user_id ">撤回消息
                                    </el-dropdown-item>
                                    <el-dropdown-item divided v-if="isMaster"
                                        :command="beforeHandleChatCommand(item,'removeBlackListBefore')">允许发言
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="isMaster"
                                        :command="beforeHandleChatCommand(item,'addBlackListBefore')">禁止发言
                                    </el-dropdown-item>
                                    <el-dropdown-item v-if="isMaster && item.user.user_id != userInfo.user_id"
                                        :command="beforeHandleChatCommand(item,'getBackMessage')">撤回消息
                                    </el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <div class="detail">
                                <a class="title" href="javascript:;">
                                    {{item.user.user_name}}
                                    <el-tag size="small" type="info" class="from">{{getPlatName(item.user.user_plat)}}
                                    </el-tag>
                                    <el-tag size="small" type="warning" class="from" v-if="item.admin">管理员
                                    </el-tag>
                                </a>
                                <div class="content">
                                    <span class="text">{{item.msg}}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="system" v-if="item.type=='system'">
                        <span>{{item.msg}}</span>
                    </div>
                    <div class="system" v-if="item.type=='back'">
                        <span>{{item.user.user_name}}撤回了一条消息</span>
                    </div>
                    <div class="pickSong" v-if="item.type=='pick'">
                        <span>{{item.user.user_name}} 点了一首 《{{item.song.name}}》</span>
                    </div>
                    <div class="nextSong" v-if="item.type=='next'">
                        <span>{{item.user.user_name}} 切掉了当前播放的歌曲</span>
                    </div>
                    <div class="pushSong" v-if="item.type=='push'">
                        <span>{{item.user.user_name}} 将歌曲 《{{item.song.name}}》设置为置顶播放</span>
                    </div>
                    <div class="gift" v-if="item.type=='gift'">
                        <span>{{urldecode(item.user.user_name)}} 为 {{urldecode(item.to.user_name)}} 送出
                            {{getGiftName(item.gift)}}<img :src="['/static/gift/'+getGiftIcon(item.gift)+'.png']"
                                style="width:40px;height:40px;" /></span>
                    </div>
                </div>
            </div>
            <div class="atbox">
                <el-tag closable type="warning" v-if="at" @close="at=''">
                    {{at_show}}
                </el-tag>
            </div>
            <div class="musicBox" v-if="musicString">
                <el-button-group>
                    <el-button type="danger" size="mini" @click="nextMusic" title="跳过这首歌">切歌</el-button>
                    <el-button type="info" size="mini" click="addLike" title="点击分享这首歌给好友" v-clipboard:copy="copyString"
                        v-clipboard:success="onCopySuccess" v-clipboard:error="onCopyError">{{musicString}}</el-button>
                    <el-button type="danger" size="mini" @click="showMusicList" title="查看当前已点的歌单">歌单</el-button>
                    <el-button type="danger" size="mini" @click="showGiftBox=!showGiftBox" title="选择送礼物">礼物</el-button>
                </el-button-group>
            </div>
            <div class="form">
                <textarea id="inputId" :placeholder="placeholder" v-model="message" @keydown.13="onEnterDown"
                    @keydown.8="delInput" @input="messageChanged" @click="closeAllBox"></textarea>
                <el-popover placement="top-start" popper-class="searchImageBox" title="搜索到的表情包" trigger="manual"
                    v-model="showSearchImageBox">
                    <div class="list" v-loading="loadingSearchImage">
                        <img v-for="(item,index) in searchImageList" v-key="item" :src="item" title="发送这个表情"
                            @click="sendSearchImg(item)" />
                    </div>
                </el-popover>
                <el-popover placement="top-start" popper-class="searchSongBox" title="搜索到的歌曲" trigger="manual"
                    v-model="showSearchSongBox">
                    <div class="list" v-loading="loadingSearchSong">
                        <el-table :data="searchSongList" stripe
                            style="display:inline-block;max-height:300px;overflow-y:auto;">
                            <el-table-column>
                                <template slot-scope="scope">
                                    《{{scope.row.name}}》{{getSinger(scope.row.singer)}}
                                    <el-link @click="pick(scope.row)" style="float:right;">添加</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-popover>

                <el-popover placement="top-start" popper-class="pickedSongBox"
                    :title="'接下来要播放的歌曲 ('+pickSongList.length+')'" trigger="manual" v-model="showPickSongBox">
                    <div class="list" v-loading="loadingPickSong">
                        <el-table :data="pickSongList" stripe style="display:inline-block;">
                            <el-table-column>
                                <template slot-scope="scope">
                                    歌曲：《{{scope.row.name}}》 点歌人：{{urldecode(scope.row.userInfo.user_name)}}
                                    <el-link @click="push2Top(scope.row)" style="float:right;">
                                        顶歌</el-link>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-popover>
                <el-popover placement="top-start" popper-class="giftBox" title="给点歌人送礼物" trigger="manual"
                    v-model="showGiftBox">
                    <img v-for="(item,index) in giftList" :title="item.name" :src="['/static/gift/'+item.icon+'.png']"
                        @click="sendGift(item)" />
                </el-popover>

                <div class="toolbar">
                    <el-dropdown>
                        <el-button type="success" size="" icon="el-icon-paperclip" circle @click="onEnterDown"
                            v-on:mouseover="showHistoryImages" v-model="showHistoryImages">
                            <!--<i class="el-icon-arrow-down el-icon--right"></i>-->
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-popover placement="top-start" title="你的历史表情包" width="360" trigger="click"
                                @show="showHistoryImages">
                                <div style="margin-top: 20px;position: absolute;right: 5px;top: -10px;">
                                    <el-radio-group v-model="imageOrderType" size="mini" @change="showHistoryImages">
                                        <el-radio-button label="最新"></el-radio-button>
                                        <el-radio-button label="常用"></el-radio-button>
                                    </el-radio-group>
                                </div>
                                <div class="myImageList">
                                    <img v-for="(item,index) in myImageList" v-key="item"
                                        :src="['/uploads/'+item.attach_thumb]" title="发送这个表情"
                                        @click="selectImage(item)" />
                                </div>
                                <el-dropdown-item slot="reference">历史图片</el-dropdown-item>
                            </el-popover>
                            <el-upload action="/api/attach/uploadimage" :show-file-list="false"
                                :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload" :data="postBase">
                                <el-dropdown-item>发送图片</el-dropdown-item>
                            </el-upload>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
            </div>
        </div>

        <div class="top">
            <span class="logo">
                <span class="title">BBBUG.com</span>
            </span>
            <span class="menu">
                <a href="javascript:void(0)" @click="doShowRankDialog">排行榜</a>
                <a href="javascript:void(0)" v-clipboard:copy="copyString" v-clipboard:success="onCopySuccess"
                    v-clipboard:error="onCopyError">邀请好友</a>
                <a href="/admin" target="_blank" v-if="isMaster">管理</a>
                <a href="javascript:void(0)" @click="showOnlineList=!showOnlineList">在线 <font color=orangered>
                        {{onlineCount}}</font></a>
                <el-dropdown @command="handleCommand">
                    <span class="el-dropdown-link">
                        设置<i class="el-icon-arrow-down el-icon--right"></i>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="clearHistory">清空记录</el-dropdown-item>
                        <el-dropdown-item command="switchNotification">{{notificateStatus?"关闭通知":"打开通知"}}
                        </el-dropdown-item>
                        <el-dropdown-item command="switchLockScreen">{{lockScreen?"解锁滚动":"锁定滚动"}}</el-dropdown-item>
                        <el-dropdown-item command="switchPlayMusic">{{playMusic?"关闭音乐":"打开音乐"}}</el-dropdown-item>
                        <el-dropdown-item divided onclick="location.replace('/oauth')">重新登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </span>
        </div>
        <el-dialog title="排行榜" :visible.sync="showRankDialog">
            <div style="margin-top: 20px;position: absolute;right: 20px;top: 0px;">
                <el-radio-group v-model="rankOrderType" size="mini" @change="doGetRankList">
                    <el-radio-button label="收礼榜"></el-radio-button>
                    <el-radio-button label="送礼榜"></el-radio-button>
                    <el-radio-button label="发言榜"></el-radio-button>
                    <el-radio-button label="斗图榜"></el-radio-button>
                    <el-radio-button label="点歌榜"></el-radio-button>
                </el-radio-group>
            </div>
            <div style="overflow-x:hidden;overflow-y: auto;max-height:400px;padding:0px 20px;" v-loading="loadingRank">
                <div v-for="(item,index) in rankList" v-key="item" class="online_user">
                    <el-image style="width: 40px; height: 40px" :src="replaceHttp2Https(item.user_head)"
                        :class="nowMusicObject.user.user_id == item.user_id?'love headimg':'headimg'">
                    </el-image>
                    {{urldecode(item.user_name)}}
                    <span style="float:right;" v-if="rankOrderType=='收礼榜'">收到{{item.user_gift}}份</span>
                    <span style="float:right;" v-if="rankOrderType=='送礼榜'">送出{{item.user_gift}}份</span>
                    <span style="float:right;" v-if="rankOrderType=='发言榜'">{{item.user_message}}句</span>
                    <span style="float:right;" v-if="rankOrderType=='斗图榜'">{{item.user_message}}张</span>
                    <span style="float:right;" v-if="rankOrderType=='点歌榜'">{{item.user_song}}首</span>
                </div>
            </div>
            <div class="giftTips" v-if="rankOrderType=='收礼榜'">* 点的歌大家喜欢听更容易收礼物呀~</div>
            <div class="giftTips" v-if="rankOrderType=='送礼榜'">* 每1分钟可以送出一个礼物，快去给喜欢的人送礼物吧~</div>
            <div class="giftTips" v-if="rankOrderType=='发言榜'">* 说这么多话的是大水逼无疑了...</div>
            <div class="giftTips" v-if="rankOrderType=='斗图榜'">* 听说表情包越多的人，心里越寂寞？</div>
            <div class="giftTips" v-if="rankOrderType=='点歌榜'">* 不知道歌好不好听，反正点的倒是挺多的...</div>
        </el-dialog>
        <el-drawer title="在线面板" direction="rtl" ref="online_box" :visible.sync="showOnlineList" :with-header="false"
            size="300px">
            <el-card class="box-card">
                <div v-for="(item,index) in onlineList" v-key="item" class="online_user">
                    <el-dropdown trigger="click" @command="commandUser" :index="index">
                        <el-image style="width: 40px; height: 40px" :src="replaceHttp2Https(item.user_head)"
                            :class="nowMusicObject.user.user_id == item.user_id?'love headimg':'headimg'">
                        </el-image>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item :command="beforeHandleUserCommand(item,'at')">@Ta</el-dropdown-item>
                            <el-dropdown-item :command="beforeHandleUserCommand(item, 'profile')">资料</el-dropdown-item>
                            <el-dropdown-item :command="beforeHandleUserCommand(item, 'black')">拉黑</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-tag size="mini">{{getPlatName(item.user_plat)}}</el-tag>
                    <el-tag size="small" type="warning" class="from" v-if="item.isMaster">管理员</el-tag>
                    {{urldecode(item.user_name)}}
                </div>
            </el-card>
        </el-drawer>
        <audio id="audio" @timeupdate="audioTimeUpdate" :src="audioUrl" ref="audio" autoplay="autoplay"></audio>
        <div class="lrc"><img v-if="musicHead" :src="musicHead" class="musicHead love" />{{nowMusicLrcText}}</div>
    </div>
</body>
<script src="static/js/vue-2.6.10.min.js"></script>
<script src="static/js/axios.min.js"></script>
<script src="static/js/element.js"></script>
<script src="static/js/StartAdmin.js?version=12345678"></script>
<script src="static/js/vue-clipboard.min.js"></script>
<script>
    //[]
    //  
    new Vue({
        el: '#app',
        data() {
            return {
                copyString: "https://bbbug.com",
                msgListKey: "MsgList-2020-08-17",
                nowMusicId: '',
                nowMusicObject: {
                    user: {}
                },
                audioUrl: "",
                musicString: "",
                musicHead: "",
                playMusic: true,
                seachImageTimer: null,
                searchImageList: [],
                searchSongList: [],
                pickSongList: [],
                cancelSearchImage: null,
                cancelSearchSong: null,
                loadingSearchImage: true,
                loadingSearchSong: true,
                loadingPickSong: true,
                loadingRank: true,
                showSearchImageBox: false,
                showSearchSongBox: false,
                showPickSongBox: false,
                showGiftBox: false,
                imageOrderType: "最新",
                rankOrderType: "收礼榜",
                onlineCount: 0,
                onlineList: [],
                showRankDialog: false,
                rankList: [],
                showSettingBox: false,
                showOnlineList: false,
                at: 0,
                at_show: "",
                message: "",
                messageList: [],
                wss: null,
                wssTimer: null,
                heartBeatTimer: null,
                notificateStatus: true,
                lockScreen: false,
                userInfo: null,
                postBase: {
                    access_token: '',
                    plat: 'chat',
                    version: 10000
                },
                connection: null,
                isMaster: false,
                placeholder: "快来说点什么把...",
                myImageList: [],
                musicLrcObj: {},
                nowMusicLrcText: "",
                giftList: [
                    {
                        id: 1,
                        name: "奥拓",
                        icon: "aotuo"
                    },
                    {
                        id: 2,
                        name: "蛋糕",
                        icon: "dangao"
                    },
                    {
                        id: 3,
                        name: "药别停",
                        icon: "yao"
                    },
                    {
                        id: 4,
                        name: "礼盒",
                        icon: "gift"
                    },
                    {
                        id: 5,
                        name: "火箭",
                        icon: "huojian"
                    },
                    {
                        id: 6,
                        name: "棒棒糖",
                        icon: "tang"
                    },
                    {
                        id: 7,
                        name: "口红",
                        icon: "kouhong"
                    },
                    {
                        id: 8,
                        name: "Lv手提包",
                        icon: "lv"
                    },
                    {
                        id: 9,
                        name: "啤酒",
                        icon: "pijiu"
                    },
                    {
                        id: 10,
                        name: "气球",
                        icon: "qiqiu"
                    },
                    {
                        id: 11,
                        name: "纸巾",
                        icon: "zhijin"
                    },
                    {
                        id: 12,
                        name: "钻戒",
                        icon: "zuanjie"
                    },
                ]
            }
        },
        created() {
            var that = this;
            that.postBase.access_token = this.getCookie('access_token');
            if (!that.postBase.access_token) {
                location.href = '/oauth';
                return;
            } else {
                that.init();
            }
            // that.getRandPlaceHolder();
        },
        mounted() {
            let that = this;
            document.getElementById('inputId').focus();
            document.addEventListener('paste', this.getClipboardFiles)

            that.$refs.audio.addEventListener("playing", function () {
                that.nowPlaying = true;
            });
            that.$refs.audio.addEventListener("ended", function () {
                that.autoNextMusic();
                that.nowPlaying = false;
                that.audioUrl = "";
                that.mid = '';
                that.musicString = '';
            });
            let volume = localStorage.getItem('volume');
            that.$refs.audio.volume = volume ? parseFloat(volume / 100) : 1;
            that.$alert('一起听歌功能上线啦，快来一起愉快的吹水听歌吧~', '新功能上线', {
                showClose: false
            }).then(function () {
                that.$refs.audio.play();
            });
        },
        updated() {
            // document.getElementById('inputId').focus();
            // var that = this;
            // if (!that.lockScreen) {
            //     let ele = document.getElementById('chatRecord');
            //     ele.scrollTop = ele.scrollHeight;
            // }
        },
        methods: {
            doGetRankList() {
                var that = this;
                that.loadingRank = true;
                let rankType = 'gift_get';
                console.log(that.rankOrderType)
                switch (that.rankOrderType) {
                    case '收礼榜':
                        rankType = 'gift_get';
                        break;
                    case '送礼榜':
                        rankType = 'gift_send';
                        break;
                    case '发言榜':
                        rankType = 'chat';
                        break;
                    case '斗图榜':
                        rankType = 'picture';
                        break;
                    case '点歌榜':
                        rankType = 'song';
                        break;
                    default:
                }
                console.log(rankType)
                axios.post('/api/chat/getRankList', Object.assign({}, that.postBase, {
                    type: rankType
                }))
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.rankList = response.data.data;
                            that.loadingRank = false;
                        } else {
                            that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            doShowRankDialog() {
                this.rankOrderType = '收礼榜';
                this.showRankDialog = true;
                this.doGetRankList();
            },
            getGiftName(id) {
                let that = this;
                for (let i in that.giftList) {
                    if (that.giftList[i].id == id) {
                        return that.giftList[i].name;
                    }
                }
                return '';
            },
            getGiftIcon(id) {
                let that = this;
                for (let i in that.giftList) {
                    if (that.giftList[i].id == id) {
                        return that.giftList[i].icon;
                    }
                }
                return '';
            },
            sendGift(item) {
                var that = this;
                if (!that.nowMusicObject.user.user_id) {
                    this.$message.error('当前没有播放任何人的歌曲');
                }
                axios.post('/api/chat/sendGift', Object.assign({}, that.postBase, {
                    user: that.nowMusicObject.user.user_id,
                    type: item.id
                }))
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.$message.success(response.data.msg);
                        } else {
                            that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            onCopySuccess(e) {
                this.$message({ message: '复制成功,快去发给好友来一起听歌吧~', type: 'success' });
            },
            onCopyError(e) {
                this.$message.error('复制失败！');
            },
            addLike() {
                this.$message.info('歌曲互动即将上线，敬请期待');
            },
            showMusicList() {
                var that = this;
                axios.post('/api/chat/songList', Object.assign({}, that.postBase, {

                }))
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.pickSongList = response.data.data;
                            that.showPickSongBox = true;
                            that.loadingPickSong = false;
                        } else {
                            that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            scrollEvent(e) {
                let that = this;
                // console.log(e.currentTarget.scrollTop);
                // console.log(e.currentTarget.scrollHeight);
                // console.log(e.currentTarget.clientHeight);
                if (e.currentTarget.scrollTop + e.currentTarget.clientHeight + 80 >= e.currentTarget.scrollHeight) {
                    that.lockScreen = false;
                } else {
                    that.lockScreen = true;
                }
            },
            switchPlayMusic() {
                let that = this;
                if (that.playMusic) {
                    that.$refs.audio.pause();
                } else {
                    that.$refs.audio.play();
                }
                that.playMusic = !that.playMusic;
            },
            autoNextMusic() {
                let that = this;
                if (!that.nowMusicId) {
                    return;
                }
                axios
                    .post('/api/chat/nextSong', Object.assign({}, that.postBase, {
                        mid: that.nowMusicId
                    }))
                    .then(function (response) {
                    })
                    .catch(function (error) {
                    });
            },
            nextMusic() {
                let that = this;
                if (that.nowMusicObject.user.user_id != that.userInfo.user_id && !that.userInfo.isMaster) {
                    that.$message.error('仅管理员和点歌人可切歌呀~');
                    return;
                }
                that.$confirm('是否确认切过本次播放的歌曲?', '切歌提示', {
                    confirmButtonText: '切歌',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    axios
                        .post('/api/chat/nextSong', Object.assign({}, that.postBase, {
                        }))
                        .then(function (response) {
                            if (response.data.code == 200) {
                                that.$message.success(response.data.msg);
                            } else {
                                that.$message.error(response.data.msg);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('出现异常，你可以控制台查看错误');
                        });
                }).catch(function () { });
            },
            getSinger(arr) {
                var _arr = [];
                for (let i in arr) {
                    _arr.push(arr[i].name);
                }
                return _arr.join("&");
            },
            pick(row) {
                let that = this;
                axios
                    .post('/api/chat/picksong', Object.assign({}, that.postBase, {
                        mid: row.mid,
                        name: row.name,
                        singer: row.singer
                    }))
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.$message.success(response.data.msg);
                        } else {
                            that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        that.$message.error('出现异常，你可以控制台查看错误');
                    });
            },
            push2Top(row) {
                let that = this;
                axios
                    .post('/api/chat/pushsong', Object.assign({}, that.postBase, {
                        mid: row.mid,
                    }))
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.$message.success(response.data.msg);
                            that.showMusicList();
                        } else {
                            that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        that.$message.error('出现异常，你可以控制台查看错误');
                    });
            },
            getClipboardFiles(event) {
                var that = this;
                let items = event.clipboardData && event.clipboardData.items;
                let file = null
                if (items && items.length) {
                    // 检索剪切板items
                    for (var i = 0; i < items.length; i++) {
                        if (items[i].type.indexOf('image') !== -1) {
                            file = items[i].getAsFile()
                        }
                    }
                }
                if (file) {
                    if (that.beforeAvatarUpload(file)) {
                        let param = new FormData();
                        param.append('file', file);
                        param.append('access_token', that.postBase.access_token);
                        param.append('plat', that.postBase.plat);
                        param.append('version', that.postBase.version);
                        let config = {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        }
                        // 添加请求头
                        axios.post('/api/attach/uploadimage', param, config)
                            .then(function (res) {
                                if (res.data.code == 200) {
                                    var msgData = {
                                        content: res.data.data.attach_thumb,
                                        resource: res.data.data.attach_path,
                                        type: 'img',
                                        at: 0
                                    };
                                    that.doSendMessage(msgData);
                                    that.message = '';
                                } else {
                                    that.$message.error(res.data.msg);
                                }
                            })
                            .catch(function (error) {
                                that.$message.error("上传图片发生错误");
                            });
                    }
                }
                return;
            },
            getImageUrl(url) {
                if (url.indexOf('https://') > -1 || url.indexOf('http://') > -1) {
                    return url;
                } else {
                    return '/uploads/' + url;
                }
            },
            closeAllBox() {
                let that = this;
                that.showSettingBox = false;
                that.showPickSongBox = false;
                that.showGiftBox = false;
                that.showSearchSongBox = false;
                that.showSearchImageBox = false;
            },
            sendSearchImg(item) {
                var that = this;
                var msgData = {
                    content: item,
                    resource: item,
                    type: 'img',
                    at: 0
                };
                that.doSendMessage(msgData);
                that.message = '';
            },
            urldecode(str) {
                return decodeURIComponent(str);
            },
            getChatClassByUser(user_id) {
                return user_id == this.userInfo.user_id ? 'item mine' : 'item';
            },
            getPlatName(plat) {
                switch (plat) {
                    case 'qq':
                        return 'QQ';
                        break;
                    case 'gitee':
                        return '码云';
                        break;
                    case 'github':
                        return 'Github';
                        break;
                    case 'oschina':
                        return '开源中国';
                        break;
                    default:
                }
                return plat;
            },
            showHistoryImages() {
                var that = this;
                axios.post('/api/attach/getMyImages', Object.assign({}, that.postBase, {
                    attach_order: that.imageOrderType == '最新' ? 'new' : 'default'
                }))
                    .then(function (response) {
                        switch (response.data.code) {
                            case CODE_SUCCESS:
                                that.myImageList = response.data.data;
                                break;
                            case CODE_LOGIN:
                                that.$message.error('用户信息初始化失败，请重新登录');
                                setTimeout(function () {
                                    location.replace('/oauth');
                                }, 3000);
                                break;
                            default:
                                that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            beforeHandleUserCommand(row, command) {
                return {
                    "row": row,
                    "command": command
                }
            },
            beforeHandleChatCommand(row, command) {
                return {
                    "row": row,
                    "command": command
                }
            },
            handleChatCommand(cmd) {
                var that = this;
                switch (cmd.command) {
                    case 'atUserBefore':
                        that.atUser(cmd.row.user.user_id, cmd.row.user.user_name);
                        break;
                    case 'showHomePageBefore':
                        switch (cmd.row.user.user_plat) {
                            case 'gitee':
                                window.open("https://gitee.com/" + cmd.row.user.user_login);
                                break;
                            case 'github':
                                window.open("https://github.com/" + cmd.row.user.user_login);
                                break;
                            case 'oschina':
                                window.open("https://my.oschina.net/" + cmd.row.user.user_login);
                                break;
                            default:
                                that.$message.error('暂不支持打开' + that.getPlatName(cmd.row.user.user_plat) + "主页");
                        }
                        break;
                    case 'showBigImageBefore':
                        that.showBigImage(cmd.row.user.user_head);
                        break;
                    case 'addBlackListBefore':
                        that.addBlackList(cmd.row.user.user_id);
                        break;
                    case 'removeBlackListBefore':
                        that.removeBlackList(cmd.row.user.user_id);
                        break;
                    case 'getBackMessage':
                        that.getBackMessage(cmd.row.sha, cmd.row.key);
                        break;
                    default:
                        that.$message.error('即将上线，敬请期待');
                }
            },
            getBackMessage(sha, key) {
                var that = this;
                axios.post('/api/chat/getBackMessage', Object.assign({}, that.postBase, {
                    sha: sha,
                    key: key
                }))
                    .then(function (response) {
                        switch (response.data.code) {
                            case CODE_SUCCESS:
                                that.$message.success(response.data.msg);
                                break;
                            case CODE_LOGIN:
                                that.$message.error('用户信息初始化失败，请重新登录');
                                setTimeout(function () {
                                    location.replace('/oauth');
                                }, 3000);
                                break;
                            default:
                                that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            commandUser(cmd) {
                var that = this;
                switch (cmd.command) {
                    case 'at':
                        that.atUser(cmd.row.user_id, cmd.row.user_name);
                        that.$refs.online_box.closeDrawer();
                        break;
                    // case 'profile':
                    //     break;
                    // case 'black':
                    //     break;
                    default:
                        that.$message.error('即将上线，敬请期待');
                }
            },
            commingSoon() {
                this.$message.error('即将上线，敬请期待');
            },
            handleCommand(cmd) {
                var that = this;
                switch (cmd) {
                    case 'clearHistory':
                        that.clearHistory();
                        break;
                    case 'switchNotification':
                        that.switchNotification();
                        break;
                    case 'switchLockScreen':
                        that.switchLockScreen();
                        break;
                    case 'switchPlayMusic':
                        that.switchPlayMusic();
                        break;
                    default:
                }
            },
            replaceHttp2Https(str) {
                return str.replace('http://', 'https://');
            },
            addSystemMessage(msg) {
                var that = this;
                that.messageList.push({
                    msg: msg,
                    type: 'system'
                });
                that.autoScroll(); //自动滚动到底部
            },
            autoScroll() {
                this.$nextTick(function () {
                    let ele = document.getElementById('chatRecord');
                    ele.scrollTop = ele.scrollHeight;
                });
            },
            init() {
                var that = this;
                axios.post('/api/user/getMyInfo', Object.assign({}, that.postBase))
                    .then(function (response) {
                        switch (response.data.code) {
                            case CODE_SUCCESS:
                                that.placeholder = (response.data.data.placeholder);
                                that.connection = response.data.data.connection;
                                var userInfo = response.data.data;
                                userInfo.name = userInfo.user_name;
                                userInfo.login = userInfo.user_login;
                                userInfo.avatar_url = userInfo.user_head;
                                userInfo.plat = userInfo.user_plat;
                                that.userInfo = userInfo;
                                that.isMaster = userInfo.isMaster;

                                that.wssInit();
                                that.messageList = [];
                                var historyMessage = localStorage.getItem(that.msgListKey);
                                if (historyMessage) {
                                    try {
                                        that.messageList = JSON.parse(historyMessage);
                                    } catch (e) { }
                                }
                                that.addSystemMessage(response.data.data.notice);
                                that.showHistoryImages();
                                break;
                            case CODE_LOGIN:
                                that.$message.error('用户信息初始化失败，请重新登录');
                                setTimeout(function () {
                                    location.replace('/oauth');
                                }, 3000);
                                break;
                            default:
                                that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            getCookie(name) {
                var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
                if (arr = document.cookie.match(reg)) {
                    return unescape(arr[2]);
                } else {
                    return null;
                }
            },
            setCookie(name, value) {
                document.cookie = name + "=" + escape(value) + ";";
            },
            delCookie(name) {
                var exp = new Date();
                exp.setTime(exp.getTime() - 1);
                var cval = getCookie(name);
                if (cval != null) {
                    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString();
                }
            },
            clearHistory() {
                var that = this;
                that.$confirm('是否确认清空本地聊天记录?', '删除聊天记录', {
                    confirmButtonText: '删除',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function () {
                    that.messageList = [];
                    localStorage.setItem(that.msgListKey, JSON.stringify(that.messageList));
                    that.addSystemMessage("历史聊天记录清理成功");
                }).catch(function () { });
            },
            selectImage(attach) {
                var that = this;
                var msgData = {
                    content: attach.attach_path,
                    content: attach.attach_thumb,
                    resource: attach.attach_path,
                    type: 'img',
                    at: 0
                };
                that.doSendMessage(msgData);
                that.message = '';
                axios.post('/api/attach/addImageUsed', Object.assign({}, that.postBase, {
                    attach_id: attach.attach_id
                }))
                    .then(function (response) { })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            handleAvatarSuccess(res, file) {
                var that = this;
                if (res.code == 200) {
                    var msgData = {
                        content: res.data.attach_thumb,
                        resource: res.data.attach_path,
                        type: 'img',
                        at: 0
                    };
                    that.doSendMessage(msgData);
                    that.message = '';
                } else {
                    that.$message.error(res.msg);
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('发送图片只能是 JPG/PNG/GIF 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('发送图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            atUser(user_id, user_name) {
                this.at = user_id;
                this.at_show = '@' + this.urldecode(user_name);
            },
            addBlackList(user_id) {
                var that = this;
                axios.post('/api/shutup/addByUser', Object.assign({}, that.postBase, {
                    user_id: user_id
                }))
                    .then(function (response) {
                        switch (response.data.code) {
                            case CODE_SUCCESS:
                                that.$message.success(response.data.msg);
                                break;
                            case CODE_LOGIN:
                                that.$message.error('用户信息初始化失败，请重新登录');
                                setTimeout(function () {
                                    location.replace('/oauth');
                                }, 3000);
                                break;
                            default:
                                that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            removeBlackList(user_id) {
                var that = this;
                axios.post('/api/shutup/deleteByUser', Object.assign({}, that.postBase, {
                    user_id: user_id
                }))
                    .then(function (response) {
                        switch (response.data.code) {
                            case CODE_SUCCESS:
                                that.$message.success(response.data.msg);
                                break;
                            case CODE_LOGIN:
                                that.$message.error('用户信息初始化失败，请重新登录');
                                setTimeout(function () {
                                    location.replace('/oauth');
                                }, 3000);
                                break;
                            default:
                                that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error)
                    });
            },
            switchLockScreen() {
                this.lockScreen = !this.lockScreen;
                if (this.lockScreen) {
                    this.addSystemMessage("已锁定屏幕,新消息将不会自动滚");
                } else {
                    this.addSystemMessage("新消息自动滚动已开启");
                }
            },
            switchNotification() {
                this.notificateStatus = !this.notificateStatus;
                if (this.notificateStatus) {
                    this.addSystemMessage("Chrome通知已开启,你将收到@新消息通知");
                    if (window.Notification && Notification.permission !== "denied") {
                        Notification.requestPermission(function (status) { // 请求权限
                            if (status === 'granted') {
                                // 弹出一个通知
                                var n = new Notification("Chrome通知已开启", {
                                    body: "有@新消息的话我会在这里提示你哟~\n\n",
                                    icon: ""
                                });
                                // 两秒后关闭通知
                                setTimeout(function () {
                                    n.close();
                                }, 5000);
                            }
                        });
                    }
                } else {
                    this.addSystemMessage("Chrome通知已关闭,你将无法收到@新消息通知");
                }
            },
            showBigImage(e) {
                this.$alert('<img style="max-width:100%;max-height:100%;" src="' + e + '"/>', '', {
                    dangerouslyUseHTMLString: true
                });
            },
            delInput(e) {
                var that = this;
                if (!that.message) {
                    that.at = "";
                }
            },
            audioTimeUpdate(e) {
                let that = this;
                // console.log('------------------------');
                // console.log(that.musicLrcObj.ms.length);
                // console.log('------------------------');
                if (that.musicLrcObj && that.musicLrcObj.ms) {
                    for (let i = 0; i < that.musicLrcObj.ms.length; i++) {
                        if (i == that.musicLrcObj.ms.length - 1) {
                            lrcText = unescape(that.musicLrcObj.ms[i].c);
                        } else {
                            if (that.$refs.audio.currentTime > that.musicLrcObj.ms[i].t && that.$refs.audio.currentTime < that.musicLrcObj.ms[i + 1].t) {
                                lrcText = unescape(that.musicLrcObj.ms[i].c);
                                break;
                            }
                        }
                    }
                    if (lrcText) {
                        that.nowMusicLrcText = lrcText;
                    } else {
                        that.nowMusicLrcText = '';
                    }
                } else {
                    that.nowMusicLrcText = '';
                }
            },
            messageChanged(e) {
                var that = this;
                if (!that.message) {
                    that.closeAllBox();
                    return;
                }
                if (that.message.indexOf("点歌") == 0) {
                    let keyword = that.message.replace('点歌', '').replace(/ /g, '').replace(/　/g, '');
                    if (keyword) {
                        that.showSearchSongBox = true;
                        that.loadingSearchSong = true;
                        if (that.cancelSearchSong) {
                            that.cancelSearchSong();
                        }
                        let CancelToken = axios.CancelToken;
                        axios.post('/api/chat/searchSong', {
                            keyword: keyword
                        }, {
                            cancelToken: new CancelToken(function executor(c) {
                                that.cancelSearchSong = c;
                            })
                        })
                            .then(function (response) {
                                that.searchSongList = response.data.data;
                                that.loadingSearchSong = false;
                            })
                            .catch(function (error) { });
                    }
                    return;
                }

                if (that.message.indexOf(":") != 0 && that.message.indexOf("：") != 0) {
                    that.showSearchImageBox = false;
                    return;
                }
                if (that.cancelSearchImage) {
                    that.cancelSearchImage();
                }
                var keyword = that.message.replace('~', '');
                keyword = keyword.replace(":", "").replace("：", "");
                if (!keyword) {
                    that.loadingSearchImage = true;
                    that.showSearchImageBox = true;
                    return;
                }
                that.loadingSearchImage = true;
                that.showSearchImageBox = true;
                let CancelToken = axios.CancelToken;
                axios.post('/api/chat/search', {
                    keyword: keyword
                }, {
                    cancelToken: new CancelToken(function executor(c) {
                        that.cancelSearchImage = c;
                    })
                })
                    .then(function (response) {
                        that.searchImageList = response.data.data;
                        that.loadingSearchImage = false;
                    })
                    .catch(function (error) { });
            },
            onEnterDown(e) {
                e.preventDefault();
                var that = this;
                if (!that.message) {
                    return;
                }
                if (that.message.indexOf("音量") == 0) {
                    let volume = parseInt(that.message.replace(/音量/g, ''));
                    if (volume < 0 || volume > 100) {
                        return;
                    } else {
                        that.$refs.audio.volume = parseFloat(volume / 100);
                        this.addSystemMessage("音量已经设置为" + volume + "%");
                        localStorage.setItem('volume', volume);
                        that.message = '';
                        return;
                    }
                }
                if (that.at) {
                    that.message = that.at_show + " " + that.message;
                }
                that.message = encodeURIComponent(that.message);
                var msgData = {
                    content: that.message,
                    type: 'text',
                    at: that.at
                };
                that.message = '';
                that.doSendMessage(msgData);
            },
            //发送消息方法
            doSendMessage(msgData) {
                var that = this;
                clearTimeout(that.seachImageTimer);
                that.showSearchImageBox = false;
                that.showSearchSongBox = false;
                axios.post('/api/user/send', Object.assign({}, that.postBase, msgData))
                    .then(function (response) {
                        switch (response.data.code) {
                            case CODE_SUCCESS:
                                break;
                            case CODE_LOGIN:
                                that.$message.error('用户信息初始化失败，请重新登录');
                                setTimeout(function () {
                                    location.replace('/oauth');
                                }, 3000);
                                break;
                            default:
                                that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            doPlay(now, user) {
                let that = this;
                if (!that.playMusic) {
                    return;
                }
                if (now.mid != that.nowMusicId || !that.nowPlaying) {
                    that.nowMusicId = now.mid;
                    that.nowMusicObject = {
                        now: now,
                        user: user
                    };
                    axios
                        .post('/api/chat/getMusicUrl', {
                            mid: that.nowMusicId
                        })
                        .then(function (response) {
                            if (response.data.code == 200) {
                                that.audioUrl = response.data.msg.replace('http://', 'https://');
                                that.$refs.audio.play();
                                that.nowPlaying = true;
                                that.$message.info('正在播放 ' + user.user_name + ' 点的歌曲《' + now.name + '》');
                                that.musicString = '正在播放 ' + user.user_name + ' 点的歌曲《' + now.name + '》';
                                that.musicHead = user.user_head;
                                that.copyString = '[正在播放]来自程序员划水摸鱼音乐聊天室' + user.user_name + '点的歌曲《' + now.name + '》\nhttps://bbbug.com';
                                that.getMusicLrc();
                            } else {
                                that.$message.error(response.data.msg);
                                setTimeout(function () {
                                    that.nowMusicId = '';
                                    that.autoNextMusic();
                                }, 1000);
                            }
                        })
                        .catch(function (error) {
                            that.$message.error('出现异常，你可以控制台查看错误');
                        });
                }
            },
            getMusicLrc() {
                let that = this;
                that.musicLrcObj = {};
                axios
                    .post('/api/chat/getSongLrc', {
                        mid: that.nowMusicId
                    })
                    .then(function (response) {
                        if (response.data.code == 200) {
                            that.musicLrcObj = (that.createLrcObj(response.data.data));
                        } else {
                            that.$message.error(response.data.msg);
                        }
                    })
                    .catch(function (error) {
                        that.$message.error('出现异常，你可以控制台查看错误');
                    });
            },
            getNowTime() {
                var now = new Date();
                var hours = now.getHours();
                var minutes = now.getMinutes();
                var seconds = now.getSeconds();
                if (hours < 10) {
                    hours = "0" + hours;
                }
                if (minutes < 10) {
                    minutes = "0" + minutes;
                }
                if (seconds < 10) {
                    seconds = "0" + seconds;
                }
                return hours + ":" + minutes + ":" + seconds;
            },
            wssInit() {
                var that = this;
                that.wss = new WebSocket("wss://wss.hamm.cn/?account=" + that.connection.account + "&channel=" + that.connection.channel + "&ticket=" + that.connection.ticket);
                that.wss.onopen = function (evt) {
                    that.heartBeat();
                };
                that.wss.onmessage = function (event) {
                    try {
                        var obj = JSON.parse(event.data);
                        obj.msg = decodeURIComponent(obj.msg);
                        if (obj.user) {
                            obj.user.user_name = decodeURIComponent(obj.user.user_name);
                        }
                        if (that.messageList.length > 100) {
                            that.messageList.shift();
                        }
                        if (obj.admin && obj.msg == 'reload') {
                            location.replace(location.href);
                            return;
                        }
                        if (obj.admin && obj.msg == 'clear') {
                            that.messageList = [];
                            localStorage.setItem(that.msgListKey, JSON.stringify(that.messageList));
                            that.addSystemMessage("管理员 " + (obj.user ? obj.user.user_name : "定时清理小助手") + " 清理了你的聊天记录");
                            return;
                        }
                        if (['now', 'online'].indexOf(obj.type) == -1) {
                            that.messageList.push(obj);
                            localStorage.setItem(that.msgListKey, JSON.stringify(that.messageList));
                            that.autoScroll(); //自动滚动到底部
                        }
                        switch (obj.type) {
                            case 'text':
                                if (obj.at == that.userInfo.user_id) {
                                    that.$notify({
                                        title: obj.user.user_name + " @了你",
                                        message: obj.msg,
                                        duration: 0
                                    });
                                }
                                if (obj.user.user_id != that.userInfo.user_id && obj.at == that.userInfo.user_id) {
                                    if (window.Notification && Notification.permission !== "denied") {
                                        Notification.requestPermission(function (status) { // 请求权限
                                            if (status === 'granted') {
                                                // 弹出一个通知
                                                var n = new Notification(obj.user.user_name + " 说:", {
                                                    body: obj.msg + "\n\n",
                                                    icon: obj.user.user_head
                                                });
                                                // 两秒后关闭通知
                                                setTimeout(function () {
                                                    n.close();
                                                }, 5000);
                                            }
                                        });
                                    }
                                }
                                break;
                            case 'now':
                                that.doPlay(obj.song, obj.user);
                                break;
                            case 'online':
                                that.onlineCount = obj.data.length;
                                that.onlineList = obj.data;
                                break;
                            case 'back':
                                for (let i = 0; i < that.messageList.length; i++) {
                                    if (that.messageList[i].sha == obj.message_sha) {
                                        // that.messageList[i].type = 'text';
                                        // that.messageList[i].msg = '该消息已被撤回';
                                        that.messageList.splice(i, 1);
                                        break;
                                    }
                                }
                                localStorage.setItem(that.msgListKey, JSON.stringify(that.messageList));
                                break;
                            default:
                        }
                        that.$nextTick(function () {
                            if (!that.lockScreen) {
                                let ele = document.getElementById('chatRecord');
                                ele.scrollTop = ele.scrollHeight;
                            }
                        });
                    } catch (e) {
                        console.log(e);
                    }
                };
                // 监听Socket的关闭
                that.wss.onclose = function (event) {
                    that.wssError();
                };
            },
            heartBeat() {
                var that = this;
                clearTimeout(that.heartBeatTimer);
                that.heartBeatTimer = setTimeout(function () {
                    that.wss.send('heartBeat');
                    that.heartBeat();
                }, 30000);
            },
            wssError() {
                var that = this;
                that.addSystemMessage("连接已断开，10s后将自动重连");
                clearTimeout(that.wssTimer);
                that.wssTimer = setTimeout(function () {
                    that.wssInit();
                }, 10000);
            },
            createLrcObj(lrc) {
                var oLRC = {
                    ti: "", //歌曲名
                    ar: "", //演唱者
                    al: "", //专辑名
                    by: "", //歌词制作人
                    offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置
                    ms: [] //歌词数组{t:时间,c:歌词}
                };

                if (lrc.length == 0) {
                    return;
                }
                var lrcs = lrc.split('\n');
                //用回车拆分成数组
                for (var i in lrcs) {
                    //遍历歌词数组
                    lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, "");
                    //去除前后空格
                    var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));
                    //取[]间的内容
                    var s = t.split(":");
                    //分离:前后文字
                    if (isNaN(parseInt(s[0]))) {
                        //不是数值
                        for (var i in oLRC) {
                            if (i != "ms" && i == s[0].toLowerCase()) {
                                oLRC[i] = s[1];
                            }
                        }
                    } else {
                        //是数值
                        var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);
                        //提取时间字段，可能有多个
                        var start = 0;
                        for (var k in arr) {
                            start += arr[k].length; //计算歌词位置
                        }
                        var content = lrcs[i].substring(start);//获取歌词内容
                        if (!content) {
                            continue;
                        }
                        for (var k in arr) {
                            var t = arr[k].substring(1, arr[k].length - 1);//取[]间的内容
                            var s = t.split(":");
                            //分离:前后文字
                            oLRC.ms.push({
                                //对象{t:时间,c:歌词}加入ms数组
                                t: parseFloat((parseFloat(s[0]) * 60 + parseFloat(s[1])).toFixed(3)),
                                c: content
                            });
                        }
                    }
                }
                oLRC.ms.sort(function (a, b) {
                    //按时间顺序排序
                    return a.t - b.t;
                });
                return oLRC;
            }
        }
    });
    axios.jsonp = function (url) {
        if (!url) {
            console.error('Axios.JSONP 至少需要一个url参数!')
            return;
        }
        var JSONP = document.createElement("script");
        JSONP.type = "text/javascript";
        JSONP.src = url;
        document.getElementsByTagName("head")[0].appendChild(JSONP);
        setTimeout(() => {
            document.getElementsByTagName("head")[0].removeChild(JSONP)
        }, 500)
    }
</script>

</html>